<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<head>
<title>选择图片上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.addImg {
	width: 190px;
	height: 190px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	cursor: pointer;
}
.section {
    width: 1200px;
    margin: 55px auto;
}
.article {
    padding: 20px;
    min-height: 230px;
}
.item {
    width: 196px;
    height: 240px;
    float: left;
    position: relative;
    margin: 15px;
    border: 3px solid #9e9e9e;
}
.layui-btn-group .layui-btn:first-child {
    border-left: none;
    border-radius: 2px 0 0 2px;
}

.layui-btn-group .layui-btn {
    margin-left: 0!important;
    margin-right: 0!important;
    border-left: 1px solid rgba(255,255,255,.5);
    border-radius: 0;
}
.layui-btn-sm {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
.layui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.layui-btns {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #FF5722;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
</style>
</head>
<body style="">
	<div class="section">
	    <input type="hidden" id="imgId" name="imgId">
	    <input type="hidden" id="num" name="num">
	    <input type="hidden" id="id" name="id">
		<div class="article" style="width: 55%;">
	<!-- 	<div style="position: relative;left: -95px;top: 125px;"> 
	        <span style="font-size: 20px;">引导页图片：</span> 
	    </div> -->
		</div>
	</div>
	<input type="file" id="file" style="display: none;" onchange="uploadPic();">
</body>
<script src="${webroot}/static/js/ajaxfileupload.js"
	type="text/javascript"></script>
<script type="text/javascript">
     $(function(){
    	 select();
     }); 
     
     function select(){
     	$.ajax({
			url : "${webroot}/guide/querypage",
			type : "POST",
			dataType : "json",
			async : false,
			cache : false,
			data:{
				type : 0
			},
			success : function(obj) {
				if (obj.length > 0) {
					for (var i = 0; i < obj.length; i++) {
					   $(".article").append('<div class="item" id="m'+ i +'"><div class="preBlock" onclick="upload('+ i +',\''+ obj[i].id +'\');"><img class="preview" id="'+ i +'" alt="" name="pic" width="190" height="190" src="http://39.108.81.229:8080/htxFile/shanda/'+ obj[i].pictureUrl +'"></div><div style="padding-left: 25px;padding-top: 4px;"><button class="layui-btn layui-btn-sm" onclick="add();">添加</button><button class="layui-btns layui-btn-sm" onclick="del('+ i +');">删除</button></div></div>');
					}
					if(obj.length < 4){
						for (var i = obj.length; i < 4; i++) {
							  $(".article").append('<div class="item" id="m'+ i +'"><div class="preBlock" onclick="upload('+ i +',null);"><img class="preview" id="'+ i +'" alt="" name="pic" width="190" height="190" src="${webroot}/static/images/wuxiao.png"></div><div style="padding-left: 25px;padding-top: 4px;"><button class="layui-btn layui-btn-sm" onclick="add();">添加</button><button class="layui-btns layui-btn-sm" onclick="del('+ i +');">删除</button></div></div>');
						}
						$("#num").val(4);
					}else{
						$("#num").val(obj.length);
					}
				}else{
					for (var i = 0; i < 4; i++) {
					  $(".article").append('<div class="item" id="m'+ i +'"><div class="preBlock" onclick="upload('+ i +',null);"><img class="preview" id="'+ i +'" alt="" name="pic" width="190" height="190" src="${webroot}/static/images/wuxiao.png"></div><div style="padding-left: 25px;padding-top: 4px;"><button class="layui-btn layui-btn-sm" onclick="add();">添加</button><button class="layui-btns layui-btn-sm" onclick="del('+ i +');">删除</button></div></div>');
					}
					$("#num").val(4);
				}
			}
		});
     }
   
    function upload(i,id){
    	$('#file').click();
    	$('#imgId').val(i);
    	$('#id').val(id);
    }
	//异步上传图片
	function uploadPic() {
		var imger = $("#file").val();
		if ($("#file").val() == "") {
			return false;
		}
		var fd = new FormData();
		fd.append("file", $("#file")[0].files[0]); //将文件转成二进制形式
		fd.append("orderBy", $("#imgId").val());
		fd.append("id", $("#id").val());
		fd.append("type", 0);
		     $.ajax({
					url : "${webroot}/file/upold",
					type : "POST",
					data : fd,
					processData : false, // 告诉jQuery不要去处理发送的数据
					contentType : false, // 告诉jQuery不要去设置Content-Type请求头
					success : function(data) {
						if (data == 1) {
							appLayer.info("图片格式不对!");
							return false;
						}
						var isJpg = data.indexOf("jpg");
						var isPng = data.indexOf("png");
						var img = data.replace("\"","").replace("\"","");
						if (isJpg > 0 || isPng > 0) { 
							$(".article").empty();
							select();
                           // $("#"+$('#imgId').val()).attr("src","${webroot}/static/image/"+img);
						} else {
							appLayer.info("图片上传失败！");
						}
					},
					error : function(resp) {
                         console.log(resp)
					}
				});
	};
	
	function add(){
	   var p = parseInt($("#num").val())+1;
	   $(".article").append('<div class="item" id="m'+ p +'"><div class="preBlock" onclick="upload('+ p +');"><img class="preview" id="'+ p +'" alt="" name="pic" width="190" height="190" src="${webroot}/static/images/wuxiao.png"></div><div style="padding-left: 25px;padding-top: 4px;"><button class="layui-btn layui-btn-sm" onclick="add();">添加</button><button class="layui-btns layui-btn-sm" onclick="del('+ p +');">删除</button></div></div>');
	   $("#num").val(p);
	}
	
	function del(o){
		$("#m"+o).remove();
		$("#num").val(parseInt($("#num").val())-1);
	}
</script>
</html>
